<template>
  <div class="search-content wrap-apply" v-show="showSearchTag">
    <Search ref="topSearch" class="search" placeholder="工单编号|物品名称" :isAdd="false" :isScreen="false" :isType="false"></Search>
    <div class="searchBox">
      <van-cell-group class="margin-top-20">
        <p class="label FormTit"><span></span>工单编号</p>
        <van-field v-model="filterForm.orderCode" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>关联订单</p>
        <van-field v-model="filterForm.sellOrderCode" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>物品编号</p>
        <van-field v-model="filterForm.serialNumber" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>物品名称</p>
        <van-field v-model="filterForm.serialName" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>规格</p>
        <van-field v-model="filterForm.serialSpecifications" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>

      <van-cell-group>
        <p class="label FormTit"><span></span>工序名称</p>
        <van-field-checkbox :supportClear='true' label="" placeholder="请选择" v-model="processSelectArr" :columns="messSingleProcessTaskStaticsDtoList" label-width="100"
          :option="{label:'text',value:'value'}" @confirm='processSelectConfirm' />
        <div class="bottomLine"></div>
      </van-cell-group>

      <van-cell-group>
        <p class="label FormTit"><span></span>操作人</p>
        <van-field :is-link="!createdByName1" readonly name="picker" v-model="createdByName1" @click="ddthrVisible1 = true"
          placeholder="请选择">
          <div slot="right-icon" v-show="!!createdByName1" @click.stop="confirmDdtjr1('', '', true)"><img
              src="~@/assets/img/filedClear.png" alt="" class="rgt-icon-width"></div>
        </van-field>
        <div class="bottomLine"></div>
      </van-cell-group>

      <van-cell-group>
        <p class="label FormTit"><span></span>创建人</p>
        <van-field :is-link="!createdByName2" readonly name="picker" v-model="createdByName2" @click="ddthrVisible2 = true"
          placeholder="请选择">
          <div slot="right-icon" v-show="!!createdByName2" @click.stop="confirmDdtjr2('', '', true)"><img
              src="~@/assets/img/filedClear.png" alt="" class="rgt-icon-width"></div>
        </van-field>
        <div class="bottomLine"></div>
      </van-cell-group>

      <van-cell-group>
        <p class="label FormTit"><span></span>更新人</p>
        <van-field :is-link="!createdByName3" readonly name="picker" v-model="createdByName3" @click="ddthrVisible3 = true"
          placeholder="请选择">
          <div slot="right-icon" v-show="!!createdByName3" @click.stop="confirmDdtjr3('', '', true)"><img
              src="~@/assets/img/filedClear.png" alt="" class="rgt-icon-width"></div>
        </van-field>
        <div class="bottomLine"></div>
      </van-cell-group>

      <van-cell-group>
        <p class="label FormTit"><span></span>更新时间</p>
        <van-field :is-link="!promiseDateRead" readonly name="picker" @click="promiseDateStartVisible = true"
          placeholder="请选择" v-model="promiseDateRead">
          <div slot="right-icon" v-show="!!promiseDateRead" @click.stop="cancelPromiseStartTime"><van-icon name="clear"
              size="16" /></div>
        </van-field>
        <div class="bottomLine"></div>
      </van-cell-group>

      <van-cell-group>
        <p class="label FormTit"><span></span>创建时间</p>
        <van-field :is-link="!filterForm.planStartTimeArr" readonly name="picker" v-model="filterForm.planStartTimeArr"
          @click="createdTimeBeginVisible = true" placeholder="请选择">
          <div slot="right-icon" v-show="!!filterForm.planStartTimeArr" @click.stop="cancelCreatedStartTime"><img
              src="~@/assets/img/filedClear.png" alt="" class="rgt-icon-width"></div>
        </van-field>
      </van-cell-group>

    </div>
    <div class="search-bottom">
      <span class="btncancel" @click="btnCancel">重置</span>
      <span class="btnconfirm" @click="btnConfirm">确定</span>
    </div>

          <!--更新开始时间 -->
      <van-popup v-model="promiseDateStartVisible" position="bottom" :close-on-click-overlay='false'>
        <van-datetime-picker @confirm="confirmPromiseStartTime" @cancel="cancelPromiseStartTime" type="date"
          title="更新开始时间" v-model="minDate1" :formatter="formatter" />
      </van-popup>
      <!--更新结束时间 -->
      <van-popup v-model="promiseDateEndVisible" position="bottom" :close-on-click-overlay='false'>
        <van-datetime-picker @confirm="confirmPromiseEndTime" @cancel="cancelPromiseEndTime" type="date" title="更新结束时间"
          :min-date="promiseEndMinDate" :formatter="formatter" />
      </van-popup>
  
      <!--创建开始时间 -->
      <van-popup v-model="createdTimeBeginVisible" position="bottom" :close-on-click-overlay='false'>
        <van-datetime-picker @confirm="confirmCreatedStartTime" @cancel="cancelCreatedStartTime" type="date"
          title="创建开始时间" v-model="minDate1" :formatter="formatter" />
      </van-popup>
      <!--创建结束时间 -->
      <van-popup v-model="createdTimeEndVisible" position="bottom" :close-on-click-overlay='false'>
        <van-datetime-picker @confirm="confirmCreatedEndTime" @cancel="cancelCreatedEndTime" type="date" title="创建结束时间"
          :min-date="createEndMinDate" :formatter="formatter" />
      </van-popup>

       <!-- 操作人 -->
     <contact-pickers :visible="ddthrVisible1" :max="5" @closePicker="ddthrVisible1 = false" @confirm="confirmDdtjr1">
    </contact-pickers>
      <!-- 创建人 -->
      <contact-pickers :visible="ddthrVisible2" :max="5" @closePicker="ddthrVisible2 = false" @confirm="confirmDdtjr2">
    </contact-pickers>
      <!-- 更新人 -->
     <contact-pickers :visible="ddthrVisible3" :max="5" @closePicker="ddthrVisible3 = false" @confirm="confirmDdtjr3">
    </contact-pickers>
  </div>
</template>

<script>
const formP = {
  applicantId: "",
  operatorId: "",
  applyTimeBegin: "",
  applyTimeEnd: "",
};
import VanFieldCheckbox from "@/components/ActionSheet/VanFieldCheckbox";
import ContactPickers from "@/components/choiceuse/ContactPickers";
import upload from "@/components/upload/upload";
import VanFieldSelectPicker from "@/components/ActionSheet/VanFieldSelectPicker";
import moment from "moment";
import Search from "@/components/search";
import { basicProductionProcessesList } from "@/api/mobile";
export default {
  name: "search",
  components: {
    ContactPickers,
    upload,
    Search,
    VanFieldSelectPicker,
    VanFieldCheckbox,
  },
  data() {
    return {
      createdByName1:'',
       ddthrVisible1:false,
      createdByName2:'',
       ddthrVisible2:false,
       createdByName3:'',
       ddthrVisible3:false,
      // 更新,创建时间
        promiseDateStartVisible: false,
        promiseDateEndVisible: false,
        createdTimeBeginVisible: false,
        createdTimeEndVisible: false,
        minDate1: new Date(),
        minDate2: new Date(),
        createEndMinDate: new Date(2020, 1, 1),
        promiseEndMinDate: new Date(2020, 1, 1),
        maxDate: new Date(2025, 10, 1),
        createdTimeRead: "",
        promiseDateRead: "",
      // 
      startTimeStart: new Date(),
      overTimeStart: new Date(),
      showSearchTag: false,
      planStart_beginTime: false,
      planStart_endTime: false,
      planOver_beginTime: false,
      planOver_endTime: false,
      startEndMinTIme: new Date(2020, 1, 1),
      overEndMinTIme: new Date(2020, 1, 1),

      /***** */
      filterForm: {
        planStartTimeArr: "",
        planOverTimeArr: "",
      },
      messSingleProcessTaskStaticsDtoList: [],
      reportSelectList: [
        {
          text: "未开始",
          value: 0,
        },
        {
          text: "生产中",
          value: 1,
        },
        {
          text: "已完成",
          value: 2,
        },
        {
          text: "已取消",
          value: 3,
        },
      ],
      statusList: [
        // {
        //   text: "请选择",
        //   value: "",
        // },
        {
          text: "未开始",
          value: "notStarted",
        },
        {
          text: "生产中",
          value: "inProduction",
        },
        {
          text: "已作废",
          value: "abolished",
        },
        {
          text: "已完成",
          value: "completed",
        },
      ],
      realForm: {},
      processSelectArr: [],
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.getLeftData();
  },
  methods: {
        // 操作人
        confirmDdtjr1(val, selectedList, judge) {
      this.filterForm.userId = "";
      this.createdByName1 = "";
      if (judge) {
        this.ddthrVisible1 = false;
        return;
      }
      this.filterForm.userId = val ? val : ""; //人员id
      let arr = [];
      if (selectedList) {
        selectedList.forEach((item) => {
          arr.push(item.realname);
        });
      }
      this.createdByName1 = arr.join(",");
      this.ddthrVisible1 = false;
    },
    // 创建人
    confirmDdtjr2(val, selectedList, judge) {
      this.filterForm.createdBy = "";
      this.createdByName2 = "";
      if (judge) {
        this.ddthrVisible2 = false;
        return;
      }
      this.filterForm.createdBy = val ? val : ""; //人员id
      let arr = [];
      if (selectedList) {
        selectedList.forEach((item) => {
          arr.push(item.realname);
        });
      }
      this.createdByName2 = arr.join(",");
      this.ddthrVisible2 = false;
    },
        // 更新人
        confirmDdtjr3(val, selectedList, judge) {
      this.filterForm.updateBy = "";
      this.createdByName3 = "";
      if (judge) {
        this.ddthrVisible3 = false;
        return;
      }
      this.filterForm.updateBy = val ? val : ""; //人员id
      let arr = [];
      if (selectedList) {
        selectedList.forEach((item) => {
          arr.push(item.realname);
        });
      }
      this.createdByName3 = arr.join(",");
      this.ddthrVisible3 = false;
    },

         // 选择更新时间开始时间
         confirmPromiseStartTime(date) {
        this.promiseEndMinDate = date;
        this.filterForm.startTimeUpdate = moment(date).startOf('day').format('YYYY-MM-DD');
        this.filterForm.endTimeUpdate = ""; // 切换开始时间后直接置空结束时间重新选择
        this.promiseDateStartVisible = false;
        this.promiseDateEndVisible = true;
        this.promiseDateRead = moment(date).format('YYYY-MM-DD')
      },
      // 取消更新时间开始时间
      cancelPromiseStartTime() {
        this.filterForm.startTimeUpdate = "";
        this.filterForm.endTimeUpdate = "";
        this.promiseDateRead = "";
        this.promiseDateStartVisible = false;
      },
      // 选择更新时间结束时间
      confirmPromiseEndTime(date) {
        this.filterForm.endTimeUpdate = moment(date).endOf('day').format('YYYY-MM-DD');
        this.promiseDateRead = this.promiseDateRead + '~' + moment(date).format('YYYY-MM-DD')
        this.promiseDateEndVisible = false;
      },
      // 取消更新时间结束时间
      cancelPromiseEndTime() {
        this.filterForm.startTimeUpdate = "";
        this.filterForm.endTimeUpdate = "";
        this.promiseDateRead = "";
        this.promiseDateEndVisible = false;
      },

         // 选择创建开始时间
         confirmCreatedStartTime(date) {
        this.createEndMinDate = date;
        this.filterForm.startTimeCreate = moment(date).startOf('day').format('YYYY-MM-DD');
        this.filterForm.endTimeCreate = ""; // 切换开始时间后直接置空结束时间重新选择
        this.createdTimeBeginVisible = false;
        this.createdTimeEndVisible = true;
        this.createdTimeRead = moment(date).format('YYYY-MM-DD');
      },
      // 取消创建开始时间
      cancelCreatedStartTime() {
        this.filterForm.startTimeCreate = "";
        this.filterForm.endTimeCreate = "";
        this.createdTimeRead = "";
        this.filterForm.planStartTimeArr = []
        this.createdTimeBeginVisible = false;
      },
      // 选择创建结束时间
      confirmCreatedEndTime(date) {
        this.filterForm.endTimeCreate = moment(date).startOf('day').format('YYYY-MM-DD');
        this.createdTimeRead = this.createdTimeRead + '~' + moment(date).format('YYYY-MM-DD')
        this.filterForm.planStartTimeArr =
        this.filterForm.startTimeCreate +
        "~" +
        this.filterForm.endTimeCreate;
        this.createdTimeEndVisible = false;
      },
      // 取消创建结束时间
      cancelCreatedEndTime() {
        this.filterForm.startTimeCreate = "";
        this.filterForm.endTimeCreate = "";
        this.createdTimeRead = "";
        this.filterForm.planStartTimeArr = []
        this.createdTimeEndVisible = false;
      },

   // ==================================================

    clickStartClose() {
      this.startTimeStart = new Date();
      this.filterForm.startPlanStartTime = "";
      this.filterForm.endPlanStartTime = "";
      this.filterForm.planStartTimeArr = "";
      this.$forceUpdate();
    },
    clickEndClose() {
      this.overTimeStart = new Date();
      this.filterForm.startPlanEndTime = "";
      this.filterForm.endPlanEndTime = "";
      this.filterForm.planOverTimeArr = "";
      this.$forceUpdate();
    },
    showModal(keyword, dropdownObj) {
      this.showSearchTag = true;
      this.$nextTick(() => {
        if(dropdownObj.endTimeCreate){
          dropdownObj.planStartTimeArr = moment(dropdownObj.startTimeCreate).format("YYYY-MM-DD") + '~' + moment(dropdownObj.endTimeCreate).format("YYYY-MM-DD")
        }

        this.$refs.topSearch.value = keyword;
        this.filterForm = JSON.parse(JSON.stringify(dropdownObj));
        this.processSelectArr = this.filterForm.processesIds
          ? this.filterForm.processesIds.split(",")
          : [];
      });
    },
    //显示弹框选择
    showAccountDialog() {},
    processSelectConfirm(proceArr) {
      if (proceArr) {
        this.processSelectArr = proceArr;
      } else {
        this.processSelectArr = [];
      }
    },
    selectReport(itemReport) {
      if (itemReport) {
        this.filterForm.orderStatus = itemReport.value;
      } else {
        this.filterForm.orderStatus = "";
      }
    },
    selectProduct(itemProduct) {
      if (itemProduct) {
        this.filterForm.orderStatus = itemProduct.value;
      } else {
        this.filterForm.orderStatus = "";
      }
    },
    getLeftData() {
      let params = {
        type: "production",
      };
      basicProductionProcessesList(params).then((res) => {
        if (res.success) {
          let resultList = res.result.records;
          this.messSingleProcessTaskStaticsDtoList = [];
          resultList = resultList.filter((item) => {
            return item.processesName && item.processesName != "全部";
          });
          for (let item of resultList) {
            let resultObj = {
              text: item.processesName,
              value: item.id,
            };
            this.messSingleProcessTaskStaticsDtoList.push(resultObj);
          }
        } else {
          this.$toast(res.message);
        }
      });
    },
    // 选择计划开始时间—开始时间
    confirmPlanStartBeginTime(date) {
      this.startEndMinTIme = date;
      this.filterForm.startPlanStartTime = moment(date).format("YYYY-MM-DD");
      this.filterForm.endPlanStartTime = ""; // 切换开始时间后直接置空结束时间重新选择
      this.planStart_beginTime = false;
      this.planStart_endTime = true;
    },
    // 取消计划开始时间—开始时间
    cancelPlanStartBeginTime() {
      this.planStart_beginTime = false;
    },
    // 选择计划开始时间—结束时间
    confirmPlanStartEndTime(date) {
      this.filterForm.endPlanStartTime = moment(date).format("YYYY-MM-DD");
      this.filterForm.planStartTimeArr =
        this.filterForm.startPlanStartTime +
        "~" +
        this.filterForm.endPlanStartTime;
      this.planStart_endTime = false;
    },
    // 取消计划开始时间—结束时间
    cancelPlanStartEndTime() {
      this.filterForm.startPlanStartTime = "";
      this.startTimeStart = new Date();
      this.planStart_endTime = false;
    },

    confirmPlanOverBeginTime(date) {
      this.overEndMinTIme = date;
      this.filterForm.startPlanEndTime = moment(date).format("YYYY-MM-DD");
      this.filterForm.endPlanEndTime = ""; // 切换开始时间后直接置空结束时间重新选择
      this.planOver_beginTime = false;
      this.planOver_endTime = true;
    },
    cancelPlanOverBeginTime() {
      this.planOver_beginTime = false;
    },
    confirmPlanOverEndTime(date) {
      this.filterForm.endPlanEndTime = moment(date).format("YYYY-MM-DD");
      this.filterForm.planOverTimeArr =
        this.filterForm.startPlanEndTime + "~" + this.filterForm.endPlanEndTime;
      this.planOver_endTime = false;
    },
    cancelPlanOverEndTime() {
      this.overTimeStart = new Date();
      this.filterForm.startPlanEndTime = "";
      this.planOver_endTime = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      if (type === "hour") {
        return val + "时";
      }
      if (type === "minute") {
        return val + "分";
      }
      return val;
    },

    btnCancel() {
      this.$refs.topSearch.value = "";
      this.filterForm = {};
      this.processSelectArr = [];
      this.planOverTimeArr = []
      this.createdTimeRead = ''
      this.promiseDateRead = ''
      this.createdByName1 = ''
      this.createdByName2 = ''
      this.createdByName3 = ''
    },
    btnConfirm() {
      this.filterForm.processesIds = this.processSelectArr.join(",");
      let sureObj = {
        ...this.filterForm,
        keyword: this.$refs.topSearch.value,
      };
      // if (
      //   sureObj.startPlanStartTime &&
      //   sureObj.startPlanStartTime.indexOf("00:00:00") < 0
      // ) {
      //   sureObj.startPlanStartTime =
      //     sureObj.startPlanStartTime + " " + "00:00:00";
      // }
      // if (
      //   sureObj.endPlanStartTime &&
      //   sureObj.endPlanStartTime.indexOf("23:59:59") < 0
      // ) {
      //   sureObj.endPlanStartTime = sureObj.endPlanStartTime + " " + "23:59:59";
      // }
      // if (
      //   sureObj.startPlanEndTime &&
      //   sureObj.startPlanEndTime.indexOf("00:00:00") < 0
      // ) {
      //   sureObj.startPlanEndTime = sureObj.startPlanEndTime + " " + "00:00:00";
      // }
      // if (
      //   sureObj.endPlanEndTime &&
      //   sureObj.endPlanEndTime.indexOf("23:59:59") < 0
      // ) {
      //   sureObj.endPlanEndTime = sureObj.endPlanEndTime + " " + "23:59:59";
      // }
      // if (!sureObj.processesIds && sureObj.processesIds != "") {
      //   sureObj.processesIds = "";
      // }
      // if (!sureObj.orderStatus && sureObj.orderStatus != "") {
      //   sureObj.orderStatus = "";
      // }
      // if (!sureObj.orderStatus && sureObj.orderStatus != "") {
      //   sureObj.orderStatus = "";
      // }
      this.showSearchTag = false;
      this.$emit("getCategory", sureObj);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";

.margin-top-20{
  margin-top:20px;
}
.rgt-icon-width{
  width:32px;
}
.search-content {
  //  padding-bottom: 0.5rem;
  position: fixed;
  top: 70px;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  z-index: 99;
  .formgroup {
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 20px;
    margin-bottom: 40px;
    padding-top: 20px;

    .title {
      width: 116px;
      height: 28px;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 10px;
      margin-left: 32px;
    }
  }
  .search-bottom {
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 12px 22px;
    font-size: 32px;
    font-weight: 500;
    .btncancel {
      flex: 1;
      background: #f6f6f6;
      // border: 0.01rem solid rgba(25, 31, 37, 0.12);
      box-sizing: border-box;
      height: 78px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      margin-right: 22px;
      color: #191f25;
    }
    .btnconfirm {
      flex: 1;
      background: #1890ff;
      box-sizing: border-box;
      height: 78px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      color: #ffffff;
    }
  }
}
.bottomLine {
  height: 2px;
  background-color: #f0f0f0;
  margin: 0 32px;
}
.searchBox {
  height: calc(100vh - 320px);
  overflow-y: auto;
}
.haveUnitBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-right: 32px;
  /deep/ .van-cell {
    padding-right: 0;
    width: 520px;
  }
  /deep/ .van-field__control {
    max-width: 600px;
  }
}
</style>